<template>
    <div class="live-banner" :class="{ 'live-banner-2': !LiveSetting.notice }" v-if="LiveSetting.livestate == 1">
        <img class="live-img" :src="LiveSetting.notice
            ? `${_oss_}images/mobile/m_live-ad.png?v=${version}`
            : `${_oss_}images/mobile/m_live-ad-2.png?v=${version}`
            " />

        <div class="livetime">直播时间：{{ LiveSetting.livetime }}</div>
        <img class="livecode" :src="LiveSetting.livecode" />

        <div class="notice-box" v-if="LiveSetting.notice">
            <img :src="_oss_ + 'images/icon-notice.png'" />
            {{ LiveSetting.notice }}
        </div>
    </div>
</template>
<script setup>
import { version } from "@/package.json";
import { useContent } from ".";

const { LiveSetting, GetLiveSetting } = useContent();

GetLiveSetting();
</script>
<style lang="scss" scoped>
.live-banner {
    position: relative;
    width: 100%;

    .notice-box {
        position: absolute;
        top: 8px;
        left: 77px;
        width: 572px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        transform: scale(0.5);
        transform-origin: left top;
        letter-spacing: 1px;

        img {
            width: 18px;
            margin-right: 10px;
        }
    }

    .live-img {
        display: block;
        width: 100%;
        // margin: 10px 0;
    }

    .livecode {
        position: absolute;
        left: 10px;
        top: 50%;
        width: 60px;
        transform: translateY(-50%);
    }

    .livetime {
        position: absolute;
        top: 49px;
        right: 30px;
        color: #fff;
        font-size: 16px;
        transform: scale(0.5);
        white-space: nowrap;
    }

    &.live-banner-2 {
        .livecode {
            left: 10px;
        }
    }
}
</style>
